<script setup lang="ts">
import type { ScheduleScheme } from '@/types'

defineProps<{
  data: ScheduleScheme['shift']
}>()
</script>

<template>
  <ul class="shift">
    <li v-for="(shift, index) in data" :key="index" class="shift-item">
      <div class="align-center flex">
        <span class="name">{{ shift.name }}：</span>
        <span class="time">{{ shift.time }}</span>
        <span v-if="shift.isCrossDay" class="is-crossday">（跨天）</span>
      </div>
    </li>
  </ul>
</template>

<style scoped>
.shift {
  margin: 0;
  padding-left: 20px;
}
.shift-item {
  display: inline-block;
  margin-right: 10px;
  font-size: 12px;
}
.shift-item .is-crossday {
  color: var(--el-color-danger);
}
</style>
